<template>
        <!-- pc端分享按钮 -->
  <div class="module_share">
    <a  @click="OpenConcat(icon)" class="svgIcon" :title="icon.word" v-for="icon in iconLink" :key="icon.icon">
      <svg class="svgNormal" >
        <use :xlink:href="'#'+icon.icon"></use>
      </svg>
      <svg class="svgHover" >
        <use :xlink:href="'#'+icon.iconHover"></use>
      </svg>
    </a>
  </div>
</template>

<script>
import { productShareNumFunc, articleShareNumFunc } from '@/utils/kanban.js'

export default {
  props: ['product', 'isArticle'],
  data () {
    return {
      iconLink: [
        {icon:'icon-Facebook1_normal', iconHover: 'icon-Facebook1_hover', word:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u='},
        // {icon:'icon-Instagram_normal_2', iconHover: 'icon-Instagram_hover_2',url:''},
        {icon:'icon-Twitter1_normal', iconHover: 'icon-Twitter1_hover', word:'Share on Twitter', url:'https://twitter.com/intent/tweet?text=' },
        {icon:'icon-Message1_normal', iconHover: 'icon-Message1_hover', word:'Share on Email', url:'mailto:?subject='},
        {icon:'icon-Link1_normal', iconHover: 'icon-Link1_hover', word:'Copy Link to Clipboard', url:'copy'},
        {icon:'icon-Top1_normal', iconHover: 'icon-Top1_hover', word:'', url:''}
      
      ],
    }
  },
  methods: {
    OpenConcat (icon){
      let that = this
      let url = icon.url
      let location = window.location.href
      let isCopy = url.indexOf('copy') > -1
      let share_way = ''
      if(url) { // 分享按钮
        if(url.indexOf('facebook') > -1){
          url += location + '&quote=' + this.product.title
          share_way = 'Facebook'
        } else if (url.indexOf('twitter') > -1){
          url+= this.product.title + '&url=' + location
          share_way = 'Twitter'
        } else if(url.indexOf('mailto') > -1) {
          url+= this.product.title + '&body=' + location
          share_way = 'Email'
        } else if (isCopy){
          url = location
          share_way = 'Link'
        } 
        if(isCopy){
          this.$copyText(url).then(function () {
            that.$message.success('Link Copied')
          }, function () {
            that.$message.success('Link not copy')
          })
        }else {
          window.open(url)
        }
        if(this.isArticle){
          articleShareNumFunc(share_way, this.product.title,this.product.id)

        } else {
          productShareNumFunc(share_way, this.product.product_model_name)

        }
      } else{
        // 回到顶部
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      }

    },
  }

}
</script>

<style lang="scss">
@import '@/styles/common/variables.scss';
.main .module_share{
  @include respond('768'){
    display: none;
  }
  display: block;
  position: fixed;
  right: 0;
  bottom: 120px;
  border-radius: 16px  0px  0px  16px  ;
  background-color: #FFFFFF;
  z-index: 99;
  width: 56px;
  text-align: center;
  box-shadow: -4px 0 8px rgba(54, 52, 52, 0.08);
  padding: 0 16px;
  a{
    display: block;
    margin-top: 32px;
    font-size: 0;
    position: relative;
    cursor: pointer;
    svg{ 
      width: 24px;
      height: 24px;
    }
    &:hover{
      .svgHover{opacity: 1;}
      .svgNormal{opacity: 0;}
    }
    .svgHover{opacity: 0;position: absolute;left: 0;top: 0;}
    .svgNormal{opacity: 1; }
    &:last-of-type{
      margin-bottom: 32px;
    }
  }
}
</style>